
<template>
  <div class="vip-video" :class="{'bg-box':isClose}">
    <Form ref="form" :model="vipForm" :rules="ruleCustom" :label-width="80">
      <FormItem label="视频连接" prop="vipLink">
        <Input type="text" v-model="vipForm.vipLink"></Input>
      </FormItem>
      <FormItem label="vip接口" prop="vipApi">
        <Select v-model="vipForm.vipApi" placeholder="请选择" style="width: 250px;">
          <Option v-for="item in group" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('form')">提交</Button>
        <Button type="ghost" @click="handleReset('form')" style="margin-left: 8px">重置</Button>
        <MyInfo @submit="newViplink" ref="childOne" class="new-btn"></MyInfo>
      </FormItem>
    </Form>
    <iframe id="video" :src="videoSrc" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>
    <p class="foot-box">感谢<a href="http://m.baiyug.cn/">百域阁</a>提供免费视频接口</p>
  </div>
</template>
<script>
  import MyInfo from './myInfo'
  export default {
    name: 'vipVideo',
    components: {
      MyInfo
    },
    data() {
      return {
        ruleCustom: {
          vipLink: [
            { validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('必填'));
                } else {
                  let reg=/^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
                  if(!reg.test(value)){
                    callback(new Error('不是URL'));
                  }
                  callback();
                }
              }, trigger: 'blur' }
          ],
          vipApi: [
            { validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('必填'));
                }else {
                  callback();
                }
              }, trigger: 'blur' }
          ]
        },
        isClose:false,
        videoSrc:'',
        vipForm:{
          vipLink:'',
          vipApi:'http://api.baiyug.cn/vip/index.php?url='
        },
        group:[
          {
            label:'优酷vip，爱奇艺vip，腾讯vip',
            value:'http://api.baiyug.cn/vip/index.php?url='
          },
          {
            label:'通用接口',
            value:'https://api.47ks.com/webcloud/?v='
          }
        ]
      }
    },
    computed: {

    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate( val =>{
          if(val){
            this.videoSrc=this.vipForm.vipApi+this.vipForm.vipLink;
          }
        });
      },
      handleReset (name) {
        this.$refs[name].resetFields();
        this.videoSrc='';
      },
      newViplink(data){
        this.group.push({
          label:data.name,
          value:data.link
        })
      }
    },
    watch:{
      group(){
        localStorage.setItem('vipLink',JSON.stringify(this.group));
      }
    },
    beforeMount(){

    },
    mounted(){
      if(localStorage.getItem('vipLink')){
        this.group=JSON.parse(localStorage.getItem('vipLink'));
      }else {
        localStorage.setItem('vipLink',JSON.stringify(this.group));
      }
    },
    created(){

    }
  }
</script>

<style lang="less" scoped>
  .foot-box{
    /*position: absolute;*/
    /*bottom:0;*/
    /*width: 100%;*/
    line-height: 2;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .recommend{
    margin: 15px auto;
  }
  .vip-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
  }
  .bg-box{
    background-color: #555;
  }
  #video{
    border: 1px solid #dadada;
    width: 100%;
    height: 100%;
    max-height: 450px;
    min-height: 450px;
    display: block;
    margin: 10px auto 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    overflow: hidden;
  }
  .new-btn{
    display: inline-block;
    vertical-align: middle;
  }
</style>
